@use "../../assets/scss/mixins/base" as mx;

html {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  &::before,
  &::after {
    box-sizing: inherit;
  }
}

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background-color: #111;
}

$color: rgb(0, 170, 255);

$alpha: 0.091;
$s: 4;
$speed: 1;
$size: 25px;

.world {
  $w: 10 * $size;
  $h: 10 * $size;
  @include mx.wh($w, $h);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: calc($w / -2);
  margin-top: calc($h / -2);
  div {
    float: left;
    @include mx.wh($size, $size);
    animation: spin #{$speed}s infinite linear;
  }

  @for $i from 1 through 100 {
    .delay-#{$i} {
      animation-delay: #{calc(($i / $alpha) * $speed / 4) % $s}s;
    }
  }
}
@keyframes spin {
  0% {
    transform: rotate3d(0, 0, 0, 0deg) scale3d(1, 1, 1);
    background-color: $color;
  }
  25%,
  75% {
    transform: rotate3d(0, 0, 1, 90deg) scale3d(0, 0, 1);
    background-color: white;
  }
  100% {
    transform: rotate3d(0, 0, 1, 180deg) scale3d(1, 1, 1);
    background-color: $color;
  }
}
